 $(function(){
      // 1.1 获取裁剪区域的 DOM 元素
  var $image = $('#image')
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  $image.cropper(options)

  // 2. 上传按钮
  $('#btnChoose').on('click',function(){
      $('.fileChoose').trigger('click')
  })

// 为 文件框  设置 change 事件
  $('.fileChoose').on('change',function(e){
    if(e.target.files.length===0)
    return layui.layer.msg('未选中照片')
    let choFile=e.target.files[0]
    let filePathVirtual=URL.createObjectURL(choFile)

    $image
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', filePathVirtual)  // 重新设置图片路径
   .cropper(options)        // 重新初始化裁剪区域
  })

 // 将裁剪好的 设置到 头像上
 $('.btnYes').on('click',function(){
    var dataURL = $image
    .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
      width: 100,
      height: 100
    })
    .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串

    // 发送异步请求 给服务器 上传图片窗口
    $.ajax({
        method:'post',
        url:'/my/update/avatar',
        data:{
            avatar:dataURL
        },
        success(res){
            // 打印返回的  消息
            layui.layer.msg(res.message)
            // 如果失败 则退出函数
            if(res.status!==0) return
            // 如果成功 调用父页面的 更新用户个人信息方法
            window.parent.getUserInfo()
        }
    })

 })   

 })